<template>
	<view class="page">

		<view class="ipt-box">
			<view class="ipt">
				<input class="uni-input" placeholder="请输入您的问题" focus v-model="question" />
			</view>
			<button class="btn" @click="Inquire">发送</button>
		</view>
		
		<view class="message" @click="skipMsg">
			<image src="../img/message.png" mode=""></image>
		</view>
		
		<view class="chat" ref="chat">
			<view class="chat-box">
				<view class="img-box">
					<image src="https://img01.yzcdn.cn/vant/cat.jpeg" mode="aspectFill"></image>
				</view>
				<view class="info-box">
					<view class="name">管理员</view>
					<view class="text">
						您好！工作人员不在线，智能客服为您服务。请您输入需要咨询的问题，目前我们仅支持模糊查询，请尽可能简短输入您的问题，比如“窗口期”、“治愈”等。如智能客服不能满足您的需求，请留言，我们的工作人员将在工作日尽快给予答复。您也可以拨打咨询热线12345。感谢您的支持！
					</view>
				</view>
			</view>

			<view class="chat-box" v-for=" (item,index) in infoData" :key="index"
				:class="[item.id % 2 ? 'chat-box1' : 'chat-box']">
				<view class="img-box">
					<image :src="item.images" mode="aspectFill"></image>
				</view>
				<view class="info-box">
					<view class="name-box">
						<view class="name" :class="[item.id % 2 ? 'name1' : 'name']">{{item.name}}</view>
					</view>
					<view class="text-box">
						<view class="text" :class="[item.id % 2 ? 'text1' : 'text']">
							<template v-if="item.id == 1 || item.id == 4">
								{{ item.message }}
							</template>
							<template v-if="!isAnswer && item.id == 2">
								<view v-if="item.id % 2 == 0 && item.message == ''">请问您需要咨询以下哪个问题?</view>
								<view v-if="item.id % 2 == 0 && item.message">{{ item.message }}</view>
								<template v-if="item.id % 2 == 0 && item.problems">
									<view v-for="(one, i) in item.problems" :key="i" @click="FindAnswer(one)">
										<text class="question">{{ i + 1 }}.{{ one.problemcontent }}</text>
									</view>
								</template>
								<view class="change-box" @click="change" v-if="item.id % 2 == 0 && item.message == ''">
									<image src="../img/change.png" mode=""></image>
									<text class="change">换一换</text>
								</view>
							</template>
						</view>
					</view>

				</view>
			</view>
			<uni-popup ref="message" type="message">
				<uni-popup-message type="warn" message="没有更多内容了~" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	// import request from '@/utils/request.js';
	import {
		Inquire,
		FindAnswer
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				question: '', // 问题
				message: '', // 换一换的关键词
				infoData: [],
				pageno: 1,
				total: '',
				isAnswer: false,
				// popupShow: false,
			}
		},
		methods: {
			Inquire() {
				if (this.question) {
					const message = this.question
					this.message = message
					this.infoData.push({
						id: 1,
						name: "用户",
						images: "https://img01.yzcdn.cn/vant/leaf.jpg",
						message: message,
					});

					let data = {
						problem: this.question,
						pageno: this.pageno,
						pagesize: 5
					}
					this.question = "" // 清空输入框
					Inquire(data).then((res) => {
						console.log(res)
						this.total = res.Data.pagenumber
						let problems = res.Data.problems;
						let message = ""
						if (!problems.length) {
							console.log("未查到");
							message =
								"很抱歉智能客服未查找到您的问题，请在留言板处提问，您的问题我们的工作人员将在工作日回答，谢谢您的提问!";
						} else {
							message = "";
						}
						this.infoData.push({
							id: 2,
							name: "管理员",
							images: "https://img01.yzcdn.cn/vant/cat.jpeg",
							message: message,
							problems: problems,
						});
						this.$nextTick(() => {
							console.log(this.$refs);
							// uni.pageScrollTo({
							// 	scrollTop: this.$refs.chat.scrollHeight,
							// 	duration: 0
							// })
						})

					})
				}
			},
			FindAnswer(one) {
				this.isAnswer = true;
				let message = one.problemcontent;
				this.infoData.push({
					id: 1,
					name: "用户",
					images: "https://img01.yzcdn.cn/vant/leaf.jpg",
					message: message,
				});
				FindAnswer(one.problemid).then((res) => {
					console.log(res);
					// this.recorddetail.push({
					// 	answerid: res.Data[0].answerid
					// });
					this.infoData.push({
						id: 4,
						name: "管理员",
						images: "https://img01.yzcdn.cn/vant/cat.jpeg",
						message: res.Data[0].answercontent,
					});
					this.isAnswer = false;
					this.$nextTick(() => {
						console.log(this.$refs.chat);
						// uni.pageScrollTo({
						// 	scrollTop: this.$refs.chat.scrollHeight,
						// 	duration: 0
						// })
					})
				})
			},
			change() {
				if (this.pageno < this.total) {
					this.pageno++;
					let data = {
						problem: this.message,
						pageno: this.pageno,
						pagesize: 5
					}
					Inquire(data).then((res) => {
						let problems = res.Data.problems;
						let message = "";
						this.infoData.push({
							id: 2,
							name: "管理员",
							images: "https://img01.yzcdn.cn/vant/cat.jpeg",
							message: message,
							problems: problems,
						});
					})
				} else {
					// this.popupShow = true
					this.$refs.message.open()
				}
			},
			skipMsg(){
				uni.navigateTo({
					url: '/page_zixun/message/message'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		height: 100vh;

		.ipt-box {
			background-color: #fff;
			z-index: 99;
			width: 100%;
			position: fixed;
			// bottom: 80rpx;
			bottom: 20rpx;
			left: 20rpx;
			display: flex;
			align-items: center;

			.ipt {
				width: 65%;
				padding: 10rpx 20rpx;
				border: darkgrey 1rpx solid;
				border-radius: 10rpx;
				// line-height: 40rpx;
			}

			.btn {
				// width: ;
				color: white;
				background-color: rgb(25, 137, 250);
				height: 60rpx;
				line-height: 60rpx;
			}
		}

		.message{
			position: fixed;
			right: 20rpx;
			top: 200rpx;
			width: 60rpx;
			height: 60rpx;
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 10rpx;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.chat {
			height: 95%;
			overflow: scroll;

			.chat-box {
				display: flex;
				padding: 20rpx;

				.img-box {
					width: 80rpx;
					height: 80rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.info-box {
					margin-left: 20rpx;
					max-width: 70%;

					.name {
						color: #888;
						font-size: 14px;
					}

					.text {
						margin-top: 20rpx;
						padding: 20rpx;
						background-color: #e8e8e8;
						border-radius: 15rpx;
					}
				}
			}

			.chat-box1 {
				flex-direction: row-reverse;

				.info-box {
					margin-right: 20rpx;
				}
			}

			.name1 {
				// flex-direction: row-reverse;
				float: right;
			}

			.text1 {
				float: right;
			}

			.question {
				color: rgb(39, 116, 218);
				display: block;
				margin-top: 20rpx;
			}

			.change-box {
				margin-top: 20rpx;
				width: 100%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>